<template>
  <div>
    <div v-for="val in datas" :key="val">{{ val }}</div>
    <div ref="obEle">loading...</div>
  </div>
</template>

<script setup lang="ts">
const datas = ref<number[]>([]);

function addData() {
  const addVal = Array.from({ length: 20 }, (_, index) => {
    return datas.value.length + index;
  });
  datas.value.push(...addVal);
}
function callback(entries: any[]) {
  const targetInfo: IntersectionObserverEntry = entries[0];
  if (datas.value.length > 100 || !targetInfo.isIntersecting) return;
  console.log(targetInfo);
  addData();
}

const init = () => {
  datas.value = Array.from({ length: 50 }, (_, index) => index);
};

init();

const obEle = ref<Element>();
onMounted(() => {
  const ob = new IntersectionObserver(callback, {
    root: null,
    threshold: 0,
  });
  if (obEle) {
    console.log(obEle.value);

    ob.observe(obEle.value as Element);
  }
});
</script>

<style scoped></style>
